


<!DOCTYPE html>

<html>

<!--
	This is a jQuery Tools standalone demo. Feel free to copy/paste.
	                                                         
	http://flowplayer.org/tools/demos/
	
	Do *not* reference CSS files and images from flowplayer.org when in production  

	Enjoy!
-->

<head>
	<title>jQuery Tools standalone demo</title>

	<!-- include the Tools -->
	<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
	 

	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	


	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-apple.css"/>
	
	<style>
	
	/* black version of the overlay. simply uses a different background image */
	div.apple_overlay.black {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/transparent.png);		
		color:#fff;
	}
	
	div.apple_overlay h2 {
		margin:10px 0 -9px 0;
		font-weight:bold;
		font-size:14px;
	}
	
	div.black h2 {
		color:#fff;
	}
	
	#triggers {
		margin-top:10px;
		text-align:center;
	}
	
	#triggers img {
		background-color:#fff;
		padding:2px;
		border:1px solid #ccc;
		margin:2px 5px;
		cursor:pointer;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
	}
	</style>

	
	
	<!--[if lt IE 7]>
	<style> 
	div.apple_overlay {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_IE6.gif);
		color:#fff;
	}
	
	/* default close button positioned on upper right corner */
	div.apple_overlay div.close {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_close_IE6.gif);
	
	}	
	</style>
	<![endif]-->
</head>

<body>


<!-- trigger elements -->
<div id="triggers">
	<img src="http://static.flowplayer.org/tools/img/photos/gustavohouse.jpg" rel="#photo1"/>
	<img src="http://static.flowplayer.org/tools/img/photos/alexanderplatz-station.jpg" rel="#photo2"/>
</div>



<!-- overlayed element, which is styled with external stylesheet -->
<div class="apple_overlay black" id="photo1">
	<img src="http://static.flowplayer.org/tools/img/photos/gustavohouse-medium.jpg" />

	<div class="details">
		<h2>Berlin Gustavohouse</h2>

		<p>
			The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in
			1998 by the Spanish artist Gustavo.
		</p>
	</div>
</div>

<div class="apple_overlay" id="photo2">
	<img src="http://static.flowplayer.org/tools/img/photos/alexanderplatz-station-medium.jpg" />

	<div class="details">
		<h2>Berlin Alexanderplatz Station</h2>

		<p>
			Berlin Alexanderplatz is a railway station in the Berlin city centre and is one
			of the city's most important interchange points for local public transport.
		</p>
	</div>
</div>


<!-- make all links with the 'rel' attribute open overlays -->
<script>


$(function() {
	$("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>
</body>

</html>